import { animated, useSpring, useSpringValue } from "@react-spring/web";
import { useEffect } from "react";
import './index.css'

export default function SpringTest2() {
    // const styles = useSpring({
    //     from: {
    //         width: 0,
    //         height: 0
    //     },
    //     to: {
    //         width: 200,
    //         height: 200
    //     },
    //     config: {
    //         // duration: 2000
    //         mass: 2,
    //         friction: 10,
    //         tension: 200
    //     }
    // })
    const [styles, api] = useSpring(() => {
        return {
            from: {
                width: 100,
                height: 100
            },
            config: {
                // duration: 2000
                mass: 2,
                friction: 10,
                tension: 200
            }
        }
    })

    function clickHandler() {
        api.start({
            width: 200,
            height: 200
        })
    }

    return <animated.div className="box" style={{...styles}} onClick={clickHandler}></animated.div>
}